<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
	</head>
	<body>
		<div id="app">
			ID:<input type="text" disabled v-model="user.id" />
			姓名:<input type="text" v-model="user.name" />
			年龄:<input type="text" v-model="user.age" />
			性别:<input type="text" v-model="user.sex" />
			<hr>
			<table id="tab1" border="1px" width="700px" align="center">
				<tr>
					<td colspan="4" align="center">
						<h1>表格数据</h1>
					</td>
				</tr>
				<tr align="center">
					<td>ID编号</td>
					<td>名称</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.sex"></td>
					<td>
						<!-- 知识点: 没有数据来源,则需要手动传递 -->
						<button @click="updatedUserBtn(item)">修改</button>
						<button @click="deleteUser(item.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>

		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					userList: [],
					user: {
						id: '',
						name: '',
						age: '',
						sex: '',
					}
				},
				methods: {
					getUserList() {
						axios.get("/getUser").then(result => {
							this.userList = result.data
							console.log(this.userList)
						})
					},
					deleteUser(id) {
						axios.delete("/user/" + id)
							.then(result => {
								this.getUserList()
							})
					},
					updatedUser() {
						axios.put("/updateUser", this.user)
							.then(result => {
								alert(result.data)
								this.getUserList()
							})
					}
				},
				mounted() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
